import React, { useState } from "react";
import { useSelector } from "react-redux";
import { Search } from "react-vant";
import ListItem from "../../components/listItem";
import { useNavigate } from "react-router-dom";
const Index = () => {
  const list = useSelector((state) => state.listReducer.list);
  const [filterList, setFilterList] = useState([]);
  const onSearch = (value) => {
    const filterList = list.filter((v) => v.title.includes(value));
    console.log(filterList);
    setFilterList(filterList);
  };
  const navigate = useNavigate();
  return (
    <div>
      <Search
        placeholder="请输入搜索的内容"
        onSearch={(value) => onSearch(value)}
      ></Search>

      {filterList.length === 0 ? (
        "暂无搜索记录"
      ) : (
        <div>
          {filterList.map((v, i) => {
            return (
              <ListItem
                v={v}
                key={i}
                onClick={() => navigate("/detail/" + v.id)}
              ></ListItem>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Index;
